<div class="tabPanel" data-dojo-attach-point="circleContainer">
    <div class="controls">
        
        <div class="controlGroup">
            <label>Create Circle From</label>
            <div class="controlItem">
                <select style="width: 225px" data-dojo-type="dijit/form/Select" data-dojo-attach-point="creationType">
                    <option value="Radius" selected="selected">Radius</option>
                    <option value="Diameter">Diameter</option>
                </select>
            </div>
        </div>

        <div class="controlGroup">
            <label data-dojo-attach-point="coordInputLabel">Center Point</label>
            <div class="controlItem">
                <input class="jimu-input coordInput" data-dojo-attach-point="startPointCoords" placeholder="Enter Coordinates" />
                <div class="controlItem paddedLeft">
                  <div class='add-with-icon'>
                    <span title="Format Input" class="jimu-icon jimu-icon-setting" data-dojo-attach-point="coordinateFormatButton"></span>
                  </div>
                  <div class='add-with-icon'>
                    <div title="Draw Circle" class="draw" data-dojo-attach-point="addPointBtn"></div>
                  </div>
                </div>
            </div>
            <div class="controlGroup">
                <input class="interactive-checkbox" type="checkbox" data-dojo-attach-point="interactiveCircle" />
                <label data-dojo-attach-point="interactiveLabel">Create Circle Interactively</label>                
            </div>
        </div>

        <div class="controlGroup">
            <label data-dojo-attach-point="radiusDiameterLabel">Radius</label>
            <div class="controlItem" data-dojo-attach-point="radiusInputDiv">
                <input
                  data-dojo-type='dijit/form/NumberTextBox'
                  required="true" value="1000" data-dojo-props="
                  constraints: {min: 1},
                  invalidMessage: 'Please enter a numeric value.',
                  rangeMessage: 'Invalid radius or diameter'"
                  data-dojo-attach-point="radiusInput">
                </input>            
                
                <select style="width: 100px" class="controlSpace noResize" data-dojo-type="dijit/form/Select" data-dojo-attach-point="lengthUnitDD">
                    <option value="feet">Feet</option>
                    <option value="kilometers">Kilometers</option>
                    <option value="miles">Miles</option>
                    <option value="meters" selected="selected">Meters</option>
                    <option value="nautical-miles">Nautical Miles</option>
                    <option value="yards">Yards</option>
                </select>
            </div>
        </div>

        <div class="controlGroup" data-dojo-attach-point='distCalcControlDiv'>
              <div data-dojo-attach-point='distCalcControl' data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Distance Calculator', open: false">
                <div class="controlGroup">
                    <label>Time<label>
                        <div class="controlItem">
                            <input style='width: 168px;'
                              data-dojo-type='dijit/form/NumberTextBox'
                              required="true" value="1" data-dojo-props="
                              constraints: {min: 1},
                              invalidMessage: 'Please enter a numeric value.',
                              rangeMessage: 'Invalid time value'"
                              data-dojo-attach-point="timeInput">
                            </input> 
                            <select class="controlSpace noResize" data-dojo-type="dijit/form/Select" data-dojo-attach-point="timeUnitDD">
                                <option value="3600">Hours</option>
                                <option value="60" selected="selected">Minutes</option>
                                <option value="1">Seconds</option>
                            </select>
                        </div>
                </div>
                <div class="controlGroup">
                    <label>Rate<label>
                        <div class="controlItem">
                            <input style='width: 168px;'
                              data-dojo-type='dijit/form/NumberTextBox'
                              required="true" value="1" data-dojo-props="
                              constraints: {min: 1},
                              invalidMessage: 'Please enter a numeric value.',
                              rangeMessage: 'Invalid distance value'"
                              data-dojo-attach-point="distanceInput">
                            </input>
                            <select class="controlSpace noResize" data-dojo-type="dijit/form/Select" data-dojo-attach-point="distanceUnitDD">
                                <option value="0.3048;1">Feet / second</option>
                                <option value="0.3048;3600">Feet / hour</option>
                                <option value="1000;1">Kilometers / second</option>
                                <option value="1000;3600">Kilometers / hour</option>
                                <option value="1;1" selected="selected">Meters / second</option>
                                <option value="1;3600">Meters / hour</option>
                                <option value="1609.344;1">Miles / second</option>
                                <option value="1609.344;3600">Miles / hour</option>
                                <option value="1852;1">Nautical Miles / second</option>
                                <option value="1852;3600">Nautical Miles / hour</option>
                            </select>
                        </div>
                </div>
            </div>
        </div>
        
        <div class="buttonContainer">
          <div class='jimu-btn jimu-state-disabled' data-dojo-attach-point='okButton' data-dojo-attach-event="onclick: okButtonClicked">OK</div>
          <div class='jimu-btn' data-dojo-attach-point='clearGraphicsButton'>Clear Graphics</div>
        </div>
      
    </div>
</div>
